<%@include file="includes.jsp" %>
<form:form modelAttribute="account">
    <div class="form-item">
        <h1>User account</h1>
        <fieldset><legend>Account information</legend>
            <div class="form-item">
                <label>Username:<span>*</span></label>
                <ul class="errors" id="userName-errors">
                    <div style='display: block'/>
                    <c:if test="${not empty account.userName}">
                        <form:errors path="userName" element="li" id="" delimiter="<li>"/>
                    </c:if>
                </ul>
                <form:input path="userName" size="60" maxlength="40"/>
                <div class="item-desc">Spaces are allowed; punctuation is not allowed except for periods, hyphens, and underscores.</div>
            </div>
            <div class="form-item" id="email">
                <label>E-mail address: <span>*</span></label>
                <ul class="errors" id="email-errors">
                    <div style='display: block'/>
                    <c:if test="${not empty account.email}">
                        <form:errors path="email" element="li" id="" delimiter="<li>"/>
                    </c:if>
                </ul>
                <form:input path="email" size="60" maxlength="40"/>
                <div class="item-desc">A valid e-mail address.</div>
            </div>
        </fieldset>
    </div>
    <div class="form-item">
        <fieldset><legend>Personal information</legend>
            <div class="form-item">
                <label>Full name: <span>*</span></label>
                <ul class="errors" id="fullName-errors">
                    <div style='display: block'/>
                    <c:if test="${not empty account.fullName}">
                        <form:errors path="fullName" element="li" id="" delimiter="<li>"/>
                    </c:if>
                </ul>
                <form:input path="fullName" size="60" maxlength="40"/>
                <div class="item-desc">Specify your first and last name.</div>
            </div>
            <div class="form-item">
                <label>Country: <span>*</span></label>
                <ul class="errors" id="country-errors">
                    <div style='display: block'/>
                    <c:if test="${not empty account.country}">
                        <form:errors path="country" element="li" id="" delimiter="<li>"/>
                    </c:if>
                </ul>
                <form:select path="country.id" items="${countries}" itemValue="id" itemLabel="name"/>
                <div class="item-desc">Specify your country.</div>
            </div>
        </fieldset>
    </div>
    <input type="submit" value="Create new account" class="form-submit" />
</form:form>